<script setup lang='ts'>
import { useGetProductBrandInfo, useUpdateProductBrandInfo } from '@fl/api/man-api'
import { SubmitBtn } from '@fl/components'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { cloneDeep } from 'lodash-es'

const visible = defineModel<boolean>('visible')

const id = defineModel('id')

const formType = defineModel<'edit' | 'view'>('formType')

const { data, isLoading } = useGetProductBrandInfo(id)

const { isPending, mutate } = useUpdateProductBrandInfo()

const state = ref({
    brandEnglishName: '',
    brandLogo: '',
    brandName: '',
    brandPinyin: '',
})

const title = computed(() => formType.value === 'view' ? '查看品牌' : '修改品牌')

const initialColumns = [
    {
        label: '品牌名称',
        prop: 'brandName',
        type: 'input',
        valueType: '',
    },
    {
        label: '品牌拼音',
        prop: 'brandPinyin',
        type: 'input',
        valueType: '',
    },
    {
        label: '品牌英文名',
        prop: 'brandEnglishName',
        type: 'input',
        valueType: '',
    },
    {
        label: '品牌Logo',
        prop: 'brandLogo',
    },
]

const columns = computed(() => {
    const result = cloneDeep(initialColumns)
    result.forEach((item) => {
        item.valueType = formType.value === 'view' ? 'text' : item.type
    })
    if (formType.value === 'view') {
        result.push(
            {
                label: '更新时间',
                prop: 'updateTime',
                type: '',
                valueType: 'text',
            },
        )
    }
    return result
})

const rules = {
    brandEnglishName: [
        {
            message: '请上传品牌logo',
            required: true,
        },
    ],
    brandLogo: [{
        message: '请输入品牌英文面',
        required: true,
    }],
    brandName: [
        {
            message: '请输入品牌名称',
            required: true,
        },
    ],
    brandPinyin: [
        {
            message: '请输入品牌名称',
            required: true,
        },
    ],
}

const formRef = ref()

async function submit() {
    const valid = await formRef.value.formInstance.validate()
    if (valid) {
        console.log()
        mutate(state.value, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                cancel()
            },
        })
    }
}

function cancel() {
    visible.value = false
}

function reset() {
    formRef.value.formInstance.resetFields()
    id.value = ''
}

watchEffect(() => {
    if (data.value) {
        console.log(data.value)
        state.value = cloneDeep(data.value)
    }
})
</script>

<template>
    <PlusDialog v-model="visible"
                :title="title"
                width="800"
                close-on-press-escape
                @cancel="cancel"
                @closed="reset"
    >
        <ElSkeleton v-if="isLoading"
                    :rows="5"
        />

        <PlusForm v-else
                  ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :label-width="100"
                  :rules="formType === 'edit' ? rules : {}"
                  :has-footer="false"
        >
            <template #plus-field-brandLogo>
                <UpdatedOss v-if=" formType === 'edit'"
                            v-model="state.brandLogo"
                            accept=".png,.jpg,.jpeg"
                />

                <div v-else>
                    <el-image v-if="data.brandLogo"
                              style="width: 100px; height: 50px"
                              :src="data?.brandLogo"
                              fit="cover"
                              :preview-src-list="[data?.brandLogo]"
                    />
                </div>
            </template>
        </PlusForm>

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn v-if="formType === 'edit'"
                           type="primary"
                           :loading="isPending"
                           @click="submit"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
